<template>
  <div class="home-taxes">
    <div class="home-content-all">
      <!-- 公司记账报税 -->
      <div class="accounting">
        <div class="home-content">
          <accounting-box
            :list="taxesList"
            @onBuyClick="openBuyModel"
          ></accounting-box>
        </div>
      </div>
    </div>

    <com-modal v-model="buyModel" title="购买下单" :width="632">
      <buy-form
        :list="taxesList"
        @on-sublint="sublintClick"
        @on-clear="clearClick"
        :active="activeData.id || ''"
      />
    </com-modal>
  </div>
</template>

<script setup lang="ts">
import comModal from "@/components/com-modal/com-modal.vue";
import accountingBox from "@/views/home/components/accounting-box/accounting-box.vue";
import buyForm from "@/views/home/components/buy-form/buy-form.vue";
import type { BuyVersion } from "@/views/home/components/buy-version/types";
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { addWebviewJs, addWeixinJs } from "@/common/add-js";

const $router = useRouter();

const buyModel = ref(false);

const taxesList = ref([]);

const activeData: any = ref({});

const openBuyModel = (data: BuyVersion) => {
  console.log(data);
  activeData.value = data;
  buyModel.value = true;
};
const clearClick = () => {
  buyModel.value = false;
};

const sublintClick = (data: {
  contact: string;
  mobile: string;
  productId: string | number;
  amount: number;
}) => {
  console.log(data);
  buyModel.value = false;

  postMeg({
    type: "sublimt",
    status: 0,
    data: data,
  });
};
/**
 * 发送消息
 */
const postMeg = (data: any) => {
  console.log(uni);
  uni.postMessage({
    data: data,
  });
  uni.navigateBack();
};

const initWebJs = async () => {
  Promise.all([addWebviewJs(), addWeixinJs()]).then((results) => {
    console.log(results);
  });
};

onMounted(() => {
  let query: any = $router.currentRoute.value.query;
  let data = query.list ? JSON.parse(query.list) : [];
  taxesList.value = data;
  document.title = "记税报账";

  initWebJs();
});
</script>

<style lang="less">
@import "@/style/var.less";
.home-content-all {
  position: relative;
}
@media (min-width: 750px) {
  .home-taxes {
    .home-content {
      width: @contentWhite;
      margin: auto;
      position: relative;
    }

    .accounting {
      height: 878px;
      background-image: url("@/assets/image/home-accounting-bg.png");
      background-size: 100% 100%;
    }
  }
}
@media (max-width: 750px) {
  .home-taxes {
    .home-content {
      width: 100%;
    }

    .accounting {
      background-image: url("@/assets/image/home-accounting-bg.png");
      background-size: 100% 100%;
      padding-bottom: 57px;
    }
  }
}
</style>
